<!DOCTYPE html>
<title>CSS Transitions Test: trigger transitions on inherited after-change styles</title>
<link rel="help" href="https://drafts.csswg.org/css-transitions-1/#after-change-style">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  #t1 :is(.outer, .inner) { transition: color 1000s steps(2, start); }
  #t1 .outer { color: red; }
  #t1 .inner { color: black; }
  #t1 .outer.green { color: lime; }
  #t1 .outer.green .inner { color: unset; }
</style>
<div id="t1">
  <div class="outer">
    <div>
      <div class="inner"></div>
    </div>
  </div>
</div>
<script>
  test(() => {
    const outer = document.querySelector("#t1 .outer");
    const inner = document.querySelector("#t1 .inner");
    outer.offsetTop;
    assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)",
                  ".outer initially red");
    assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)",
                  ".inner initially black");
    outer.classList.add("green");
    assert_equals(getComputedStyle(outer).color, "rgb(128, 128, 0)",
                  ".outer halfway between red and lime");
    assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)",
                  ".inner halfway between black and lime");
  }, "Start .inner transition based on inherited after-change color from .outer (lime)");
</script>

<style>
  #t2 :is(.outer, .inner) { transition: background-color 1000s steps(2, start); }
  #t2 .outer { background-color: red; }
  #t2 .inner { background-color: black; }
  #t2 .outer.green { background-color: lime; }
  #t2 .outer.green div { background-color: inherit; }
</style>
<div id="t2">
  <div class="outer">
    <div>
      <div class="inner"></div>
    </div>
  </div>
</div>
<script>
  test(() => {
    const outer = document.querySelector("#t2 .outer");
    const inner = document.querySelector("#t2 .inner");
    outer.offsetTop;
    assert_equals(getComputedStyle(outer).backgroundColor, "rgb(255, 0, 0)",
                  ".outer initially red");
    assert_equals(getComputedStyle(inner).backgroundColor, "rgb(0, 0, 0)",
                  ".inner initially black");
    outer.classList.add("green");
    assert_equals(getComputedStyle(outer).backgroundColor, "rgb(128, 128, 0)",
                  ".outer halfway between red and lime");
    assert_equals(getComputedStyle(inner).backgroundColor, "rgb(0, 128, 0)",
                  ".inner halfway between black and lime");
  }, "Start .inner transition based on inherited after-change background-color from .outer (lime)");
</script>

<style>
  #t3 .trans {
    transition: 1000s steps(2, start);
    transition-property: color, word-spacing;
  }

  #t3 .a2 { color: red; }
  #t3 .a3 { color: black; }
  #t3 .a2.green { color: lime; }
  #t3 .a2.green .a3 { color: unset; }

  #t3 .a1 { word-spacing: 17px; }
  #t3 .a3 { word-spacing: 0px; }
  #t3 .a1.wide { word-spacing: 100px; }
  #t3 .a1.wide .a3 { word-spacing: unset; }
</style>
<div id="t3">
  <div class="trans a1">
    <div style="color:pink">
      <div class="trans a2">
          <div class="trans a3"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  const a1 = document.querySelector("#t3 .a1");
  const a2 = document.querySelector("#t3 .a2");
  const a3 = document.querySelector("#t3 .a3");

  test(() => {
    assert_equals(getComputedStyle(a3).color, "rgb(0, 0, 0)", ".a3 color initially black");
    assert_equals(getComputedStyle(a3).wordSpacing, "0px", ".a3 word-spacing initially 0px");
  }, "Initial computed styles");

  test(() => {
    a1.classList.add("wide");
    a2.classList.add("green");
    assert_equals(getComputedStyle(a3).color, "rgb(0, 128, 0)", ".a3 color transitioning between black and lime");
    assert_equals(getComputedStyle(a3).wordSpacing, "50px", ".a3 word-spacing transitioning between 0px and 100px");
  }, "Start inner transitions based on inherited after-change color and word-spacing from two different ancestors");
</script>

<style>
  #t4 :is(.outer, .inner) { transition: color 1000s steps(2, start); }
  #t4 .outer { color: red; }
  #t4 .inner { color: black; }
  #t4 .outer.green { color: lime; }
  #t4 .outer.green .inner { color: unset; }
  @starting-style {
    #t4 .outer.green { color: pink; }
  }
</style>
<div id="t4">
  <div class="outer">
    <div>
      <div class="inner"></div>
    </div>
  </div>
</div>
<script>
  test(() => {
    const outer = document.querySelector("#t4 .outer");
    const inner = document.querySelector("#t4 .inner");
    outer.offsetTop;
    assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)",
                  ".outer initially red");
    assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)",
                  ".inner initially black");
    outer.classList.add("green");
    assert_equals(getComputedStyle(outer).color, "rgb(128, 128, 0)",
                  ".outer halfway between red and lime");
    assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)",
                  ".inner halfway between black and lime");
  }, "@starting-style rules should not apply to after-change style");
</script>

<style>
  #t5 :is(.outer, .inner) { transition: color 1000s steps(2, start); }
  #t5 .outer { color: red; }
  #t5 .inner { color: black; }
  #t5 .outer.green { color: lime; }
  #t5 .container { container-type: inline-size; }
  @container (width < 100000px) {
    #t5 .outer.green .inner { color: unset; }
  }
</style>
<div id="t5">
  <div class="outer">
    <div class="container">
      <div class="inner"></div>
    </div>
  </div>
</div>
<script>
  test(() => {
    const outer = document.querySelector("#t5 .outer");
    const inner = document.querySelector("#t5 .inner");
    outer.offsetTop;
    assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)",
                  ".outer initially red");
    assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)",
                  ".inner initially black");
    outer.classList.add("green");
    assert_equals(getComputedStyle(outer).color, "rgb(128, 128, 0)",
                  ".outer halfway between red and lime");
    assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)",
                  ".inner halfway between black and lime");
  }, "@container rules apply to after-change style");
</script>
